<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 样 式 文 件 -->
  <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
  <link rel="stylesheet" th:href="@{/admin/css/other/register.css}">
  <!-- 资 源 引 入 -->
  <script th:src="@{/component/layui/layui.js}"></script>
  <script th:src="@{/component/pear/pear.js}"></script>
  <!--    用于ajax-->
  <script th:src="@{/js/jquery.js}"></script>
  <title>找回密码</title>
  <style>
    .layadmin-link {
      color: #029789!important;
    }
    .layadmin-user-login-other>* {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      font-size: 14px;
    }
    .layui-tab .layui-tab-title li {
      position: relative;
      line-height: 40px;
      min-width: 65px;
      margin: 0;
      padding: 0px 43px;
      text-align: center;
      cursor: pointer;
    }
    .error{
      color: red;
      display: none;
    }
  </style>
</head>
<body th:background="@{/admin/images/background.svg}" style="background-size: cover;">
<form class="layui-form" lay-filter="retrieve" id="retrieve">
  <div class="layui-form-item">
    <img class="logo" th:src="@{/admin/images/logo.png}" />
    <div class="title">Wang Xue</div>
    <div class="desc">
      你 若 不 离 开，便 是 我 的 终 点。
    </div>
  </div>
  <div class="layui-form-item">
    <input placeholder="请输入手机号/邮箱" id="input" name="input" lay-verify="required" hover class="layui-input"  />
    <span class="error" id="inputError">手机号/邮箱格式不正确</span>
    <span class="error" id="inputNull">手机号/邮箱不能为空</span>
    <span class="error" id="inputExist">该手机号/邮箱未注册</span>
  </div>
  <div class="layui-form-item">
    <input placeholder="验证码"  id="captcha" name="captcha"  hover  lay-verify="required" class="code layui-input layui-input-inline" maxlength="4" minlength="4" />
    <img th:src="@{/captcha}"  id="captchaImage" class="codeImage"  onclick="changeCaptcha()"/>
    <span class="error" id="captchaNull"><br /><br /><br />验证码不能为空</span>
    <span class="error" id="captchaError"><br /><br /><br />验证码错误</span>
  </div>
  <div class="layui-form-item">
    <button type="submit" lay-filter="retrieve" class="pear-btn pear-btn-success">下一步</button>
  </div>
  <a href="login" class="layadmin-link"><i class="layui-icon layui-icon-left"></i>返回登录</a>
</form>

<!--获取焦点-->
<script>
  window.onload = function() {
    var inputElement = document.getElementById("input");
    inputElement.focus();
  }
</script>


<!--获取当前项目路径-->
<script type="text/javascript" th:inline="javascript">
  // thymeleaf 获取当前项目路径
  /*<![CDATA[*/
  const ctx = /*[[@{/}]]*/;
  /*]]>*/
  // 当前窗口 不是最外层窗口
  if (window != window.top){
    // 父窗口 window.parent，最外层窗口 window.top
    window.top.location.href = ctx;
  }
</script>

<!--监听输入框-->
<script>
  layui.use(['form', 'layer'], function() {
    var form = layui.form;
    var layer = layui.layer;
    // 输入时监听输入框的失去焦点事件
    $('#input').on('input', function () {
      var phoneOrEmail = $(this).val();
      var phoneOrEmailReg = /^1[3-9]\d{9}$/; // 电话号码正则表达式
      var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;// 邮箱正则表达式
      // 验证电话号码/邮箱格式是否正确
      if (phoneOrEmailReg.test(phoneOrEmail) || emailReg.test(phoneOrEmail)) {
        $('#inputError').hide(); // 隐藏错误提示
        $('#inputNull').hide();// 隐藏空提示
      } else {
        $('#inputError').show(); // 显示错误提示
        $('#inputNull').hide()// 隐藏空提示
      }
    });
    // 监听输入框的失去焦点事件
    $(document).ready(function () {
      $("#input").blur(function () {
        var input = $(this).val();
        var inputExist = document.getElementById('inputExist');
        var inputNull = document.getElementById('inputNull');
        if (input == null || input == "") {
          inputNull.style.display = 'inline';
          return false;
        } else {
          inputNull.style.display = 'none';
          return true;
        }
        //阻止表单提交
        event.preventDefault();
        // 验证手机号/邮箱是否存在
        if (input) {
          $.ajax({
            url: "/checkEmailOrPhone", // 后端验证接口地址
            type: "POST",
            data: {
              input: input
            },
            success: function (response) {// 成功回调函数
              console.log(response);
              if (response === "exists") {
                inputExist.style.display = 'none';
                return true;
              } else {
                inputExist.style.display = 'inline';
                //刷新验证码
                changeCaptcha();
                //清空输入框
                document.getElementById('input').value = "";
                document.getElementById('input').focus();
                return false;
              }
            },
            error: function () {
              console.log("请求后端验证接口失败");
              // 显示500页面
              window.location.href = "/500";
            }
          });
        }
      });
    });

    // 监听验证码输入框的失去焦点事件
    $('#captcha').on('input', function () {
      var captcha = $(this).val();
      if (captcha != null && captcha != "") {
        $('#captchaNull').hide(); // 隐藏错误提示
      } else {
        $('#captchaNull').show(); // 显示错误提示
      }
    });
    document.getElementById('captcha').addEventListener('blur', function () {
      var inputNull = document.getElementById('captchaNull');
      if (this.value == null || this.value === "") {
        inputNull.style.display = 'inline';
      } else {
        inputNull.style.display = 'none';
      }
    });

    // 监听下一步按钮的点击事件
    document.querySelector('button[lay-filter="retrieve"]').addEventListener('click', function () {
      //检查其他输入框是否为空
      if ((document.getElementById('input').value === "" || document.getElementById('input').value === null)) {
        // 显示提示框
        document.getElementById('inputNull').style.display = 'inline';
        return false;
      } else {
        document.getElementById('inputNull').style.display = 'none';
        return true;
      }
      if (document.getElementById('captcha').value === "" || document.getElementById('captcha').value === null) {
        // 显示提示框
        document.getElementById('captchaNull').style.display = 'inline';
        return false;
      } else {
        document.getElementById('captchaNull').style.display = 'none';
        return true;
      }
    });
    // 监听表单提交事件
    $(document).ready(function () {
      $('#retrieve').on('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交事件
        var input = $('#input').val();
        var captcha = $('#captcha').val();
        if (input === null || captcha === null || input === "" || captcha === "") {
          document.getElementById("inputNull").style.display = "block"; // 显示错误信息
          document.getElementById("input").focus();
          // 刷新验证码
          changeCaptcha();
          // 清空验证码输入框
          document.getElementById('captcha').value = "";
          return;
        }
        $.ajax({
          url: '/retrieve',
          type: 'POST',
          data: {
            input: input,
            captcha: captcha
          },
          success: function (response) {
            // 提交成功的处理逻辑
            // 处理后端返回的结果
            console.log(response);
            if (response.code === 200) {
              window.location.href = ctx + response.data;
            } else {
              if (response.code === 501) {//邮箱/手机号发送失败
                // console.log(response.msg);
                alert(response.msg);
              } else if (response.code === 201) {//验证码错误
                console.log(response.msg);
                document.getElementById("captchaError").style.display = "block"; // 显示错误信息
                document.getElementById("captcha").focus();
                // 刷新验证码
                changeCaptcha();
                // 清空验证码输入框
                document.getElementById('captcha').value = "";
              } else {
                window.location.href = ctx + "util/500";
              }
            }
          }, error: function (error) {
            console.log(error);
            window.location.href = ctx + "util/500";
          }
        });
      });
    });
  })

</script>

<!--刷新验证码-->
<script>
  // 刷新验证码
  function changeCaptcha() {
    // 获取验证码图片地址
    var captchaImg = document.getElementById('captchaImage');
    //重新获取验证码
    captchaImg.src = '/refreshCaptcha?' + Date.now();//加上时间戳，避免缓存
  }
</script>

</body>
</html>
